<template>
  <div style="background-color: #F3F3F3;padding-bottom: 50px;">
    <van-nav-bar
      title="教学安排日报"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad">
        <!-- v-for="item in list" :key="item" -->
        <div v-for="item in list" :key="item" class="cell-item">
          <!-- {{item}} -->
          <span class="title-span">“不忘初心、牢记使命”主题动员大会</span>
          <div class="line-item-sper"></div>
          <van-row class="van-row-item" type="flex">
            <van-col class="van-col-left">时间</van-col>
            <van-col  class="van-col-rightc-content">上午8:45-上午9:00</van-col>
          </van-row>
          <van-row class="van-row-item" type="flex">
            <van-col class="van-col-left">班级</van-col>
            <van-col class="van-col-rightc-content">青春普陀训练140人（班级1） </van-col>
          </van-row>
          <van-row class="van-row-item" type="flex">
            <van-col class="van-col-left">授课人</van-col>
            <van-col class="van-col-rightc-content">张老师</van-col>
          </van-row>
          <van-row class="van-row-item" type="flex" justify="space-between">
            <van-col class="van-col-left">地点</van-col>
            <div style="flex: 1;height: 20px;" class="van-col-rightc-content">106研讨室</div>
            <van-col>></van-col>
          </van-row>
        </div>
      </van-list>
    </van-pull-refresh>
    <PageChangeControl class="page-control" preText="前一天" currText="今天" nextText="后一天"  @pre="pre()" @current="current()" @next="next()"></PageChangeControl>
  </div>
</template>

<script>
  import PageChangeControl from './PageChangeControl.vue'
  import moment from 'moment'
export default {
  created() {
    this.$data.role = this.$route.query.role;
  },
  data() {
      return {
        role:-1,
        list: [],
        loading: false,
        finished: false,
        refreshing: false,
        dayDistance:0,
      };
    },
    methods: {
      onLoad() {
        setTimeout(() => {
          if (this.refreshing) {
            this.list = [];
            this.refreshing = false;
          }

          for (let i = 0; i < 10; i++) {
            this.list.push(this.list.length + 1);
          }
          this.loading = false;

          if (this.list.length >= 40) {
            this.finished = true;
          }
        }, 1000);
      },
      onRefresh() {
        // 清空列表数据
        this.finished = false;

        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        this.onLoad();
      },
      onClickLeft() {
        this.$router.push({path:'/home',query:{role:this.$data.role}})
      },
      onClickCard() {
        this.$router.push({path:'/qualityDetail',query:{role:this.$data.role}})
      },
      pre() {
        this.dayDistance = this.dayDistance - 1
        var lastDay = moment().add(this.dayDistance,'day').format('YYYY-MM-DD')
        console.log('前一天' + lastDay)
      },
      current() {
        this.dayDistance = 0
        var today = moment().format('YYYY-MM-DD')
        console.log('今天' + today)
      },
      next() {
        this.dayDistance = this.dayDistance + 1
        var nextDay = moment().add(this.dayDistance,'day').format('YYYY-MM-DD')
        console.log('后一天' + nextDay)
      }
    },
    components:{
      PageChangeControl
    }
}
</script>

<style>
  .cell-item {
    width: calc(100% - 32px);
    height: auto !important;
    margin-left: 16px;
    border-radius: 8px;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-bottom: 16px;
    background-color: #FFFFFF;
  }
  .title-span {
    display: inline-block;
    margin-left: 16px;
    margin-right: 16px;
    margin-top: 16px;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    line-height: 24px;
  }
  .van-row-item {
    margin-left: 16px;
    margin-right: 16px;
  }

  .van-col-left {
    width: 50px;
    height: 20px;
    color: #A1A1A1;
  }
  .van-col-rightc-content {
    font-size: 12px;
    color: #1D1D1D;
    font-weight: 300;
  }
  .line-item-sper {
    height: 1px;
    margin-left: 16px;
    margin-right: 16px;
    flex: 1;
    background-color: #F3F3F3;
    margin-top: 3px;
    margin-bottom: 5px;
  }
  .page-control {
    left: 0;
    position: fixed;
    bottom: 0;
    width: 100%;
  }
</style>
